<template>
    <div class="commodity">
        <el-row>
            <el-col :span="24">
               <div class="our-store">
                   本店商品
               </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-col :span="4"><h1>汉堡</h1></el-col>
            </el-col>
            <el-col :span="24">
                <!-- 制作商品的无序列表 -->
                <ul class='cookList'>
                  <!-- 使用v-for循环输出 type0Goods的商品数据 -->
                  <li v-for="(goods, type) in type0Goods" :key="type" @click="addOrderList(goods)">
                    <!-- 商品图片 -->
                    <span class="foodImg">
                      <img :src="goods.goodsImg" width="100%">
                    </span>
                    <!-- 商品名称 -->
                    <span class="foodName">{{goods.goodsName}}</span>
                    <!-- 商品价格 -->
                    <span class="foodPrice">￥{{goods.price}}元</span>
                  </li>
                </ul>
            </el-col>
            <el-col :span="24">
                <el-col :span="4"><h1>小食</h1></el-col>
            </el-col>
            <el-col :span="24">
                <!-- 制作商品的无序列表 -->
                <ul class='cookList'>
                  <!-- 使用v-for循环输出 type0Goods的商品数据 -->
                  <li v-for="(goods, type) in type1Goods" :key="type" @click="addOrderList(goods)">
                    <!-- 商品图片 -->
                    <span class="foodImg">
                      <img :src="goods.goodsImg" width="100%">
                    </span>
                    <!-- 商品名称 -->
                    <span class="foodName">{{goods.goodsName}}</span>
                    <!-- 商品价格 -->
                    <span class="foodPrice">￥{{goods.price}}元</span>
                  </li>
                </ul>
            </el-col>
            <el-col :span="24">
                <el-col :span="4"><h1>饮料</h1></el-col>
            </el-col>
            <el-col :span="24">
                <!-- 制作商品的无序列表 -->
                <ul class='cookList'>
                  <!-- 使用v-for循环输出 type0Goods的商品数据 -->
                  <li v-for="(goods, type) in type2Goods" :key="type" @click="addOrderList(goods)">
                    <!-- 商品图片 -->
                    <span class="foodImg">
                      <img :src="goods.goodsImg" width="100%">
                    </span>
                    <!-- 商品名称 -->
                    <span class="foodName">{{goods.goodsName}}</span>
                    <!-- 商品价格 -->
                    <span class="foodPrice">￥{{goods.price}}元</span>
                  </li>
                </ul>
            </el-col>
            <el-col :span="24">
                <el-col :span="4"><h1>套餐</h1></el-col>
            </el-col>
            <el-col :span="24">
                <!-- 制作商品的无序列表 -->
                <ul class='cookList'>
                  <!-- 使用v-for循环输出 type0Goods的商品数据 -->
                  <li v-for="(goods, type) in type3Goods" :key="type" @click="addOrderList(goods)">
                    <!-- 商品图片 -->
                    <span class="foodImg">
                      <img :src="goods.goodsImg" width="100%">
                    </span>
                    <!-- 商品名称 -->
                    <span class="foodName">{{goods.goodsName}}</span>
                    <!-- 商品价格 -->
                    <span class="foodPrice">￥{{goods.price}}元</span>
                  </li>
                </ul>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import axios from 'axios'

export default {
    name:'commodity',
    data() {
        return {
            type0Goods: [],
            type1Goods: [],
            type2Goods: [],
            type3Goods: [],
        }
    },
    created() {
        // 读取分类商品列表
        axios.get('https://www.fastmock.site/mock/2a1b64bbf15c90d03379f16c42b4d823/oftenGoods/type0Goods')
        .then(response => {
            // console.log(response);
            // this.oftenGoods=response.data;
            this.type0Goods = response.data.data[0]
            this.type1Goods = response.data.data[1]
            this.type2Goods = response.data.data[2]
            this.type3Goods = response.data.data[3]
        })
        .catch(error => {
            console.log(error)
            alert('网络错误，不能访问')
        })
    },
}
</script>
<style>
    .our-store {
        font-size: 2rem;
        font-weight: 600;
        padding-top: 20px;
    }
    .cookList li{
        list-style: none;
        width:20%;
        border:1px solid #E5E9F2;
        height: auot;
        overflow: hidden;
        background-color:#fff;
        padding: 2px;
        float:left;
        margin: 2px;
        cursor: pointer;
    }
    .cookList li span{
        display: block;
        float:left;
    }
    .foodImg{
        width: 50%;
    }
    .foodImg img {
        height: 100px;
    }
    .foodName {
        width: 50%;
        padding-top: 20px;
        font-size: 18px;
        font-weight: 800;
        float: left;
    }
    .foodPrice {
        float: left;
        width: 50%;
        padding-top: 10px;
    }
</style>
